<template>
  <div class="app-container">
    <div style="background-color: #fff">
      <div class="container-module" style="padding-bottom: 0">
        <el-form
          :inline="true"
          class="search-form"
          size="small"
          ref="searchForm"
          :model="searchForm"
        >
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item class="search-form-item" label="报错时间">
                <el-date-picker
                  @change="domeTimeWay"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  v-model="establishTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getList"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div style="padding: 0 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :span="4" style="float: right">
              <div class="right-panel el-button-group">
                <el-button class="" icon="el-icon-refresh" size="mini" @click="getList"></el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                      <el-checkbox v-model="checkboxTableThead"
                        :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>


        <el-row :gutter="20">
          <el-col class="new_table_card">
            <el-table
              highlight-current-row
              :data="erroeList"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
              v-loading="loading"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                min-width="80"
                align="center"
              >
                <template slot-scope="scope">
                  <div v-if="fruit == 'region'">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="
                        scope.row.province_name + scope.row.city_name + ''
                      "
                      placement="top"
                    >
                      <div>
                        {{ scope.row.province_name }}{{ scope.row.city_name }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else-if="fruit == 'monthly_transaction_number'">
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row.deal.order_total_num + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row.deal.order_total_num }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else-if="fruit == 'monthly_excuse_number'">
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row.refund.refund_total_num + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row.refund.refund_total_num }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else-if="fruit == 'monthly_sales_money'">
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row.deal.price_total_num + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row.deal.price_total_num }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else-if="fruit == 'monthl_ysales_money_actual'">
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row.deal.price_total_num + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row.deal.price_total_num }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else>
                    <el-tooltip
                      placement="top-start"
                      :content="scope.row[fruit] + ''"
                    >
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                fixed="right"
                width="180"
                prop="address"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-popconfirm
                    title="确定删除该日志吗？"
                    @confirm="delmansger(scope.row)"
                  >
                    <el-button type="text" slot="reference"> 删除 </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table></el-col
          >
        </el-row>
        <el-row style="text-align: right">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="searchForm.page"
            :limit.sync="searchForm.count"
            @pagination="getList"
          />
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getErrorlist } from "@/api/admin/errorreporting";

const tableTheadOption = {
  id: {
    label: "报错ID",
    field: "id",
  },
  title: {
    label: "标题",
    field: "title",
  },
  level: {
    label: "日志等级",
    field: "level",
  },
  request_host: {
    label: "请求host",
    field: "request_host",
  },
  request_uri: {
    label: "请求uri",
    field: "request_uri",
  },
  request_method: {
    label: "请求方法",
    field: "request_method",
  },
  request_data: {
    label: "请求参数",
    field: "request_data",
  },
  request_ip: {
    label: "ip",
    field: "request_ip",
  },
  context: {
    label: "额外参数",
    field: "context",
  },
  created_at: {
    label: "创建时间",
    field: "created_at",
  },
  updated_at: {
    label: "更新时间",
    field: "updated_at",
  },
};
const allTableThead = [
  "id",
  "title",
  "level",
  "request_host",
  "request_uri",
  "request_method",
  "request_data",
  "request_ip",
  "context",
  "created_at",
  "updated_at",
];
const defaultTableThead = [
  "id",
  "title",
  "level",
  "request_host",
  "request_uri",
  "request_method",
  "request_data",
  "request_ip",
  "context",
  "created_at",
  "updated_at",
];
export default {
    name: "errorreporting",
  components: {},
  data() {
    return {
      establishTime: [],
      erroeList: [],

      // 默认表头
      tableTheadOptions: tableTheadOption, //所有表头
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲

      searchForm: {
        page: 1,
        count: 10,
        params: {
          level: "ERROR",
          start_time:'',
          end_time:'',
        },
       
      },
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      this.loading = false;
      getErrorlist(this.searchForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          this.loading = false;
          return;
        }
        this.erroeList = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    domeTimeWay(val) {
      this.searchForm.params.start_time = val[0];
      this.searchForm.params.end_time = val[1];
    },
    //删除
    delmansger(row) {
      return
      managerdelete({
        id: row.id,
      }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.$messages.success(res.msg);
        this.getList();
      });
    },

    //重置
    resetting() {
      this.searchForm = {
        page: 1,
        count: 10,
        params: {
          level: "ERROR",
          start_time:'',
          end_time:'',
        },
      }
      this.establishTime = [];
      this.getList();
    },
  },
};
</script>

<style></style>
